<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>QiniuTest</title>
        <!-- 跨越
        <meta http-equiv="Access-Control-Allow-Origin" content="*"/>
        -->
        <link rel="stylesheet" type="text/css" href="css/base.css">
        <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/plupload-2.1.8/js/moxie.js"></script>
        <script type="text/javascript" src="js/plupload-2.1.8/js/plupload.dev.js"></script>
        <!--
        <script type="text/javascript" src="js/plupload-2.1.8/js/plupload.full.min.js"></script>
        -->
        <script type="text/javascript" src="js/qiniu.js"></script>
        <script type="text/javascript" src="js/base64.min.js"></script>
    </head>
    <body>
        <h4>QiniuTest</h4>

        <a href="#" title="上传凭证" id="uptoken">上传凭证</a>
        <a href="#" title="下载凭证" id="dnurl" key="decade_Jellyfish.jpg">下载凭证</a>
        <a href="#" title="下载缩略图凭证" id="thumbnail" key="decade_Jellyfish.jpg">下载缩略图凭证</a>

        <div style="margin-top: 10px; margin-bottom: 10px;">
            <form method="post" action="http://upload.qiniu.com/" enctype="multipart/form-data" id="container">
                <input type="file" name="file"/>
                <input type="hidden" name="key" value=""/>
                <input type="hidden" name="x:name" value=""/>
                <input type="hidden" name="token" value=""/>
                <!--  <input type="submit" value="submit"/>  -->
                <input type="button" value="上传" id="uploader" id="uploader"/>
                <input type="reset" value="reset"/>
            </form>
        </div>

        <img src="" alt="image" title="image">

        <hr/>

        <div style="margin-top: 10px; margin-bottom: 10px;">
            <form method="post" action="http://127.0.0.1:3000/file/upload" enctype="multipart/form-data">
                <input type="file" name="file"/>
                <input type="text" name="name" value="11"/>
                <input type="submit" value="submit"/>
                <input type="reset" value="reset"/>
            </form>
        </div>

        <hr/>

        <div style="margin-top: 10px; margin-bottom: 10px;">
            <input type="text" value="" id="base64Text"/>
            <input type="button" value="base64" id="base64Btn"/>
        </div>

        <script type="text/javascript">
            $(function(){
                var bucket = "decade";
                var domain = 'http://7xn4q0.com1.z0.glb.clouddn.com/';

                function getUploadToken(bucketName, successCallback, errorCallback) {
                    $.ajax({
                        url: "http://127.0.0.1:3000/qiniu/uptoken/" + bucketName,
                        type: "get",
                        data: {acao: 1},
                        dataType: "json",
                        success: function(data){
                            successCallback(data);
                        },
                        error: function(xhr, status, err){
                            errorCallback(xhr, status, err);
                        }
                    });
                }

                function getDownloadUrl(key, successCallback, errorCallback) {
                    $.ajax({
                        url: "http://127.0.0.1:3000/qiniu/dnurl/" + key,
                        type: 'get',
                        data: null,
                        dataType: "json",
                        success: function(data){
                            successCallback(data);
                        },
                        error: function(xhr, status, err){
                            errorCallback(xhr, status, err);
                        }
                    });
                }

                function getThumbnailUrl(key, params, successCallback, errorCallback) {
                    $.ajax({
                        url: "http://127.0.0.1:3000/qiniu/thumbnail/" + key,
                        type: 'get',
                        data: params,
                        dataType: "json",
                        success: function(data){
                            successCallback(data);
                        },
                        error: function(xhr, status, err){
                            errorCallback(xhr, status, err);
                        }
                    });
                }

                $("#uptoken").click(function(){
                    getUploadToken(bucket, function(data){
                        console.dir(data);
                        console.log("上传凭证： " + data.uptoken);
                        alert("上传凭证： " + data.uptoken);
                    }, function(xhr, status, err){
                        alert("获取上传凭证失败: " + err.message);
                    });
                });

                $("#dnurl").click(function(){
                    var key = $(this).attr('key');
                    getDownloadUrl(key, function(data){
                        console.dir(data);
                        console.log("下载凭证地址： " + data.dnurl);
                        alert("下载凭证地址： " + data.dnurl);
                    }, function(xhr, status, err){
                        alert("获取下载凭证址失败: " + err.message);
                    })
                });

                $("#thumbnail").click(function(){
                    var key = $(this).attr('key');
                    getThumbnailUrl(key, {
                        width: 300,
                        //height: 100,
                        quality: 60,
                        format: "png"
                    }, function(data){
                        console.dir(data);
                        console.log("下载缩略图凭证地址： " + data.thumbnail);
                        alert("下载缩略图凭证地址： " + data.thumbnail);
                    }, function(xhr, status, err){
                        alert("获取下载缩略图凭证址失败: " + err.message);
                    })
                });

                //初始化上传功能控件
                var uploader = Qiniu.uploader({
                    runtimes: 'html5,flash,html4',    //上传模式,依次退化
                    browse_button: 'uploader',  //上传选择的点选按钮，**必需**
                    uptoken_url: 'http://127.0.0.1:3000/qiniu/uptoken/' + bucket, //Ajax请求upToken的Url，**强烈建议设置**（服务端提供）
                    // uptoken : '<Your upload token>',   //若未指定uptoken_url,则必须指定 uptoken ,uptoken由其他程序生成
                    // unique_names: true,   // 默认 false，key为文件名。若开启该选项，SDK会为每个文件自动生成key（文件名）
                    // save_key: true,  // 默认 false。若在服务端生成uptoken的上传策略中指定了 `sava_key`，则开启，SDK在前端将不对key进行任何处理
                    domain: domain,  //bucket 域名，下载资源时用到，**必需**
                    container: 'container',   //上传区域DOM ID，默认是browser_button的父元素
                    max_file_size: '100mb',           //最大文件体积限制
                    flash_swf_url: 'js/plupload-2.1.8/js/Moxie.swf',  //引入flash,相对路径
                    max_retries: 3,                   //上传失败最大重试次数
                    dragdrop: true,                   //开启可拖曳上传
                    drop_element: 'container',        //拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传
                    //chunk_size: '4mb',                //分块上传时，每片的体积
                    auto_start: true,                 //选择文件后自动上传，若关闭需要自己绑定事件触发上传
                    init: {
                        'FilesAdded': function(up, files) {
                            plupload.each(files, function(file) {
                                // 文件添加进队列后,处理相关的事情
                                console.log('添加文件: ' + file.name);
                            });
                        },
                        'BeforeUpload': function(up, file) {
                            // 每个文件上传前,处理相关的事情
                            console.log('开始上传文件: ' + file.name);
                        },
                        'UploadProgress': function(up, file) {
                            // 每个文件上传时,处理相关的事情
                        },
                        'FileUploaded': function(up, file, info) {
                            // 每个文件上传成功后,处理相关的事情
                            // 其中 info 是文件上传成功后，服务端返回的json，形式如
                            // {
                            //    "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
                            //    "key": "gogopher.jpg"
                            //  }
                            // 参考http://developer.qiniu.com/docs/v6/api/overview/up/response/simple-response.html
                            var domain = up.getOption('domain');
                            var res = $.parseJSON(info);
                            var sourceLink = domain + res.key;   //获取上传成功后的文件的Url
                            sourceLink = Qiniu.getUrl(res.key);
                            console.log('文件上传完成: ' + sourceLink);
                            console.dir(res);
                        },
                        'Error': function(up, err, errTip) {
                            //上传出错时,处理相关的事情
                            console.log('文件上传出错: ' + err.message);
                        },
                        'UploadComplete': function() {
                            //队列文件处理完毕后,处理相关的事情
                        },
                        'Key': function(up, file) {
                            // 若想在前端对每个文件的key进行个性化处理，可以配置该函数
                            // 该配置必须要在 unique_names: false , save_key: false 时才生效
                            var key = "decade_" + file.name;
                            // do something with key here
                            //缓存key值
                            $("#dnurl").attr("key", key);
                            $("#thumbnail").attr("key", key);
                            return key;
                        }
                    }
                });
            });
        </script>
    </body>
</html>